import 'package:car_map/mode/navigation_model.dart';
import 'package:car_map/mode/spuare_type_mode.dart';
import 'package:car_map/widget/load_image.dart';
import 'package:car_map/widget/square_type_title.dart';
import 'package:car_map/widget/widget_4s_sliveradapter.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

///4S店
class FourSPage extends StatefulWidget {
  @override
  _fourSState createState() => _fourSState();
}

class _fourSState extends State<FourSPage> {
  List<SpuareTypeModel> navigationList;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getSpuareTypeModelList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Container(
          child: CustomScrollView(
        slivers: <Widget>[
          appBar(),
          SliverToBoxAdapter(
            child: Widget4SSliverAdapter(),
          ),
          SliverToBoxAdapter(
            child: Container(
              padding: EdgeInsets.only(left: 10.0, right: 10.0),
              child: SpuareTypeTitle(
                title: '全部车型',
                colorsText: Colors.blue,
              ),
            ),
          ),
          getGrivder(),
        ],
      )),
    );
  }

  //标题
  Widget appBar() {
    return SliverAppBar(
      expandedHeight: ScreenUtil().setHeight(400.0),
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        centerTitle: true,
        title: Text('4S店'),
        background: Stack(
          alignment: Alignment.bottomCenter,
          children: <Widget>[
            Positioned.fill(
              top: 0,
              bottom: 0,
              left: 0,
              right: 0,
              child: LoadImage(
                'http://hbimg.b0.upaiyun.com/26d77572613082b2253e6d3ca2ef9390abae342a752f-Yu74SU_fw658',
                fit: BoxFit.fill,
              ),
            ),
            Container(
              height: 200,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                begin: Alignment.bottomCenter,
                end: Alignment.topCenter,
                colors: [Colors.black87, Colors.transparent],
              )),
            )
          ],
        ),
      ),
    );
  }

  //列表
  Widget getGrivder() {
    return SliverGrid(
      delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return itemGrider(navigationList[index]);
      }, childCount: navigationList.length),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 1.3,
          mainAxisSpacing: 8.0), //crossAxisSpacing: 8.0
    );
  }

  Widget itemGrider(SpuareTypeModel spuareTypeModel) {
    return Container(
      margin: EdgeInsets.only(left: 8.0, right: 8.0),
      height: ScreenUtil().setHeight(120.0),
      decoration: BoxDecoration(
          color: Colors.indigo[900],
          borderRadius: BorderRadius.all(Radius.circular(5.0))),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          LoadImage(
            spuareTypeModel.urlPath,
            height:ScreenUtil().setHeight(100.0),
          ),
          Container(
            margin: EdgeInsets.only(top: 8.0),
            decoration: BoxDecoration(
                border: Border(
              top: BorderSide(color: Colors.black12, width: 1.0),
            )),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  '${spuareTypeModel.title}',
                  style: TextStyle(
                      color: Colors.white, fontWeight: FontWeight.bold),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('指导价', style: TextStyle(color: Colors.white70)),
                    Text('￥${spuareTypeModel.subContent}万',
                        style: TextStyle(
                            color: Colors.white, fontWeight: FontWeight.bold)),
                    Text('起', style: TextStyle(color: Colors.white70))
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  List<SpuareTypeModel> getSpuareTypeModelList() {
    navigationList = new List();
    navigationList.add(new SpuareTypeModel(
        title: 'T-Roc探歌',
        urlPath:
            'https://one-app-production-1256532032.picbj.myqcloud.com/734ea3ebfc62473abca079837b1adb2d.png',
        subContent: '13.58'));

    navigationList.add(new SpuareTypeModel(
        title: 'Tayron探岳',
        urlPath:
            'https://one-app-production-1256532032.picbj.myqcloud.com/9d117383406d48b9b08ef23d74c53353.png',
        subContent: '18.59'));
    navigationList.add(new SpuareTypeModel(
        title: '宝来·纯电',
        urlPath:
            'https://one-app-production-1256532032.picbj.myqcloud.com/baadc156711e4d59acc97269c4058fc8.png',
        subContent: '13.68'));
    navigationList.add(new SpuareTypeModel(
        title: '高尔夫·纯电',
        urlPath:
            'https://one-app-production-1256532032.picbj.myqcloud.com/1bddc5c269184f1c86d67b1e2eee59a9.png',
        subContent: '14.77'));
    navigationList.add(new SpuareTypeModel(
        title: '迈腾',
        urlPath:
            'https://one-app-production-1256532032.picbj.myqcloud.com/46535b7a6053438f8b7f2ecb2569a4c1.png',
        subContent: '18.61'));
    navigationList.add(new SpuareTypeModel(
        title: '全新一代CC',
        urlPath:
            'https://one-app-production-1256532032.picbj.myqcloud.com/1b301045595f4398a02670166d7e4c1c.png',
        subContent: '24.68'));
    navigationList.add(new SpuareTypeModel(
        title: 'C-Trek蔚领',
        urlPath:
            'https://one-app-production-1256532032.picbj.myqcloud.com/63978c913ba046e9a78aa230d3512c51.png',
        subContent: '12.59'));
    navigationList.add(new SpuareTypeModel(
        title: '高尔夫 · 嘉旅',
        urlPath:
            'https://one-app-production-1256532032.picbj.myqcloud.com/3ccfb1ccd5654b959e1fcbb24e7f8fb0.png',
        subContent: '12.88'));
  }
}
